<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>  
        <div id="app">
            <button @click="isHot = !isHot">按钮</button>
            <!-- 如果不使用这个标签的话， vue的插件就不会改变，因为vue的插件是根据真实dom的渲染情况来酌情改变的 -->
            <h1>今天天气真{{isHot?"热":"冷"}}</h1>
            <img src="url" alt="">
        </div>
        <script>
            const vm = new Vue({
                el:"#app",
                data(){
                    return {
                        isHot:true,
                        url:'./re.webp'
                    }
                },
                watch:{
                    isHot:{
                        //当ishot变化 就会固定触发handler事件函数（名字固定为handler）
                        //其中第一个参数是改变后的数据，第二个参数是改变前的原始数据
                            handler(newData,oldData){
                                this.url= newData?'./re.webp':'./leng.gif '
                            }   
                    }
                }
            })
        </script>
</body>
</html>